<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="jquery-2.1.4/jquery.min.js"></script>
</head>
<style>
    body
    {
        margin:0;
        padding:0;
    }
    #backgroundImg
    {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    }
    #backgroundImg1
    {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        display: none;
    }
    #musicList{position:fixed;width:300px;height:100%;background-color: rgba(0,0,0,0.2);right:-300px;-webkit-transition:0.5s;}
    .arrow{position:absolute;top:300px;left:-50px;}
</style>
<body>
    <div id="backgroundImg" style="background: url('01.jpg') center no-repeat fixed;"></div>
    <div id="backgroundImg1" style="background: url('03.jpg') center no-repeat fixed;" ></div>
    <div id="musicList"><div class="arrow"><img src="icon/arrow.png" draggable="false" width="50" height="50" style="cursor: pointer;-webkit-transition:0.5s;" /></div></div>
</body>
<script type="text/javascript">
    var backgroundImg=$("#backgroundImg1");
    var changeVal=1;
    var arrIndex=1;
    var imgArr=["01.jpg","03.jpg","04.jpg","05.jpg"];
    var musicListState=true;
    function changeBackground()
    {
        if(arrIndex>=imgArr.length){arrIndex=0}
        backgroundImg.fadeIn(2000);
        backgroundImg.css("background-image","url('"+imgArr[arrIndex]+"')");
        backgroundImg=changeVal==2?$("#backgroundImg1"):$("#backgroundImg");
        changeVal=changeVal==1?2:1;
        backgroundImg.fadeOut(2000);
        arrIndex++;
    }
    setInterval("changeBackground()",10000);
    $(".arrow img").click(function()
    {
        if(musicListState)
        {
            $(this).css("transform","rotate(-180deg)");
            $("#musicList").css("right","0px");
            musicListState=false;
        }
        else
        {
            $(this).css("transform","rotate(0deg)");
            $("#musicList").css("right","-300px");
            musicListState=true;
        }
    })

   /* $.post(,{},function(e)
    {
        console.log(e);
    })*/
    $.ajax({
        url:"C:/Users/OP/Documents/Web/acgMusic/lrc/START DASH.lrc",
        headers:{
            contentType:"application/x-www-form-urlencoded"
        },
        success:function(lrc){
            console.log(lrc);
           /* var lyric = parseLyric(lrc);
            if(success)success(lyric);*/
        },
        error:function(e){
            if(error)error(e);
        }
    });
</script>
</html>